<!-- 客户排名变动 -->
<template>
    <div class="boxs">
      <div class="top">
          <div class="top1">
              <div class="event">
                  关键事件热度走势
              </div>
              <div class="year">
                  <el-form :inline="true" :model="bondInfoForm">
  
              <el-form-item label="年度：">
                <el-select v-model="value" placeholder="请选择" @change="dimension">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
              </div>
          </div>
          <div class="top2">
              <div class="line" id="main" style="width: 100%;height:350px">
  
              </div>
          </div>
      </div>
  
      <div class="bottoms">
        <div class="lefts">
          <div class="upper">人民币对美元汇率中间价连续三天调整</div>
          <div class="middle">
            3月24日，人民币对美元汇率中间价调升335个基点，报6.8374，升至今年2月16日以来最高。同时，这也是人民币对美元汇率中间价连续第三天调升。截至3月24日，本周以来，人民币对美元汇率中间价累计调升678个基点。
            近期，在岸、离岸人民币对美元汇率亦双双震荡上行。其中，3月23日，离岸人民币对美元汇率在盘中升破6.82，报6.8107，创2月15日以来新高;收盘报6.8299，较前一日收盘价6.8611上涨312个基点。在岸人民币对美元汇率在盘中升破6.82，为2月15日以来首次:收盘报6.8289，较前一日收盘价6.8903大涨614个基点。
            Wind数据显示，自3月16日以来，美元指数持续走低。3月23日盘中，美元指数一度跌破102，为2月6日以来首次。截至3月23日收盘，美元指数报102.6068，较3月8日创下的年内最高收盘价105.6928已跌近3%。
          </div>
          <!-- <div class="lower">更多></div> -->
        </div>
        <div class="rights">
          <div class="upper">人民币对美元汇率中间价连续三天调整</div>
          <div class="middle">
            3月24日，人民币对美元汇率中间价调升335个基点，报6.8374，升至今年2月16日以来最高。同时，这也是人民币对美元汇率中间价连续第三天调升。截至3月24日，本周以来，人民币对美元汇率中间价累计调升678个基点。
            近期，在岸、离岸人民币对美元汇率亦双双震荡上行。其中，3月23日，离岸人民币对美元汇率在盘中升破6.82，报6.8107，创2月15日以来新高;收盘报6.8299，较前一日收盘价6.8611上涨312个基点。在岸人民币对美元汇率在盘中升破6.82，为2月15日以来首次:收盘报6.8289，较前一日收盘价6.8903大涨614个基点。
            Wind数据显示，自3月16日以来，美元指数持续走低。3月23日盘中，美元指数一度跌破102，为2月6日以来首次。截至3月23日收盘，美元指数报102.6068，较3月8日创下的年内最高收盘价105.6928已跌近3%。
          </div>
          <!-- <div class="lower">更多></div> -->
        </div>
      </div>
    </div>
  </template>
    <script>
    import * as echarts from 'echarts';
  
  import { getBond } from "@/api/common/index.js";
  //   import earches from "./components/earches.vue";
  //   import descend from "./components/descend.vue";
  import {
    queryBondProbabilityDetail,
    newBondInfo,
  } from "@/api/recommendationSystem/index.js";
  import { getMaxListeners } from 'process';
  export default {
    name: "",
    components: {
      // earches,
      // descend
    },
    data() {
      return {
          options: [
            {
              value: "选项1",
              label: "北京",
            },
            {
              value: "选项2",
              label: "上海",
            },
            {
              value: "选项3",
              label: "广州",
            },
            {
              value: "选项4",
              label: "杭州",
            },
            {
              value: "选项5",
              label: "重庆",
            },
            {
              value: "选项6",
              label: "大连",
            },
          ],
          value:'',
        //  tabs切换
        activeName: "second",
        drawer: false,
        searchList: [],
        tableData: [],
        searchInput: "",
        bondInfo: {},
        total: 0,
        count: "",
        page: 1,
        bondTotal: 0,
        bondInfoForm: {
          bondSname: "",
          bondId: "",
          value1: "",
        },
      };
    },
    filters: {
      filterNum(value) {
        const str = value ? value.toString() : "";
        if (str) {
          const reg =
            str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
          const returnData = str.replace(reg, ",");
          return returnData;
        } else {
          return "";
        }
      },
    },
    created(){
      this.getMaxListeners()
    },
    mounted() {
      this.getMaxListeners()
    },
    methods: {
      //折线图
      getMaxListeners(){main
          var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
  
  option = {
    xAxis: {
      type: 'category',
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
     axisLine:{
      lineStyle:{
          color:'white',
      }
     }
    },
    yAxis: {
      type: 'value',
      axisLine:{
      lineStyle:{
          color:'white',
      }
     }
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260,235,356,123,256,276],
        type: 'line',
        color:['#1670ac'],
      },
      
    ]
  };
  
  option && myChart.setOption(option);
  
      },
      // tabs切换
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 文件上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        );
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      //   新增弹框
      onSubmit() {
        console.log("submit!");
      },
      //
      clearFn() {
        this.bondInfo = {};
      },
      bondInfoSubmit() {
        const param = {
          ...this.bondInfoForm,
          pn: 10,
          page: 1,
        };
        console.log("newBondInfo param", param);
        this.newBondInfo(param);
      },
      glFn(row) {
        return row.assessRate;
        // return Number(Number(row.assessRate) * 100).toFixed(2) + "%"
      },
      zjFn() {
        this.drawer = true;
        const param = {
          bondName: "",
          bondId: "",
          pn: 10,
          page: 1,
        };
        this.newBondInfo(param);
      },
      bondRowClick(row) {
        this.drawer = false;
        const param = {
          bondName: row.bondName,
          bondId: row.bondId,
          pn: 10,
          page: 1,
        };
        getBond(param).then((res) => {
          this.bondInfo = res.data.result[0];
        });
        queryBondProbabilityDetail({
          bondId: row.bondId,
          page: 1,
          pn: 10,
        }).then((res) => {
          console.log(res, "resres");
          this.tableData = res.data.result;
          this.total = Number(res.data.totalResults);
        });
      },
      bondPageFn(page) {
        const param = {
          bondName: "",
          bondId: "",
          pn: 10,
          page: page,
        };
        this.newBondInfo(param);
      },
      pageFn(currentPage) {
        console.log("pageFn", currentPage);
        queryBondProbabilityDetail({
          bondId: this.bondInfo.bondId,
          page: currentPage,
          pn: 10,
        }).then((res) => {
          this.tableData = res.data.result;
          this.total = Number(res.data.totalResults);
        });
      },
      newBondInfo(param) {
        const _this = this;
        newBondInfo(param).then((res) => {
          _this.searchList = res.data.result;
          _this.bondTotal = Number(res.data.totalResults);
          console.log(res, "resres");
        });
      },
      clickFn(v, i) {
        this.clearFn();
        this.count = i;
        this.bondInfo = {
          ...v,
        };
        queryBondProbabilityDetail({
          bondId: v.bondId,
          page: this.page,
          pn: 10,
        }).then((res) => {
          console.log(res, "resres");
          this.tableData = res.data.result;
          this.total = Number(res.data.totalResults);
        });
      },
    },
  };
  </script>
    <style lang="scss" scoped>
  .boxs {
    background-color: #1c2d38;
    padding: 0px !important;
    margin: 0px !important;
    width: 100%;
    // background-color: red;
    .bottoms {
      width: 100%;
      min-height: 360px;
    }
  
    .bottoms {
      display: flex;
      .lefts {
        flex: 1;
  
        background-color: #262d47;
        margin-right: 10px;
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
        .upper{
          text-align: center;
          line-height: 30px;
          margin-bottom: 20px;
          font-size: 20px;
          font-weight: bolder;
        }
        .middle{
          line-height: 30px;
  
        }
      //   .lower{
      //     float: right;
      //     margin-top: 25px;
      //   }
      }
      .rights {
        flex: 1;
  
        background-color: #262d47;
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
        .upper{
          text-align: center;
          line-height: 30px;
          margin-bottom: 20px;
          font-size: 20px;
          font-weight: bolder;
        }
        .middle{
          line-height: 30px;
  
        }
        .lower{
          float: right;
          margin-top: 25px;
        }
      }
    }
  
    .top {
      width: 100%;
      flex: 1;
      height: 400px;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      background-color: #262d47;
      .top1{
          width: 100%;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
        padding-left: 15px;
      //   padding-right: 15px;
        padding-top: 10px;
        .event{
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
  </style>
    